<template>
    <div class="message-container" >
        <h2 style="text-align: center;">在线留言</h2>
        <el-form ref="messageForm"  :model="message" label-position="top" :rules="rules" style="font-size: 12px;">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="message.name"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件" prop="email">
                <el-input v-model="message.email"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
                <el-input v-model="message.phone"></el-input>
            </el-form-item>
            <el-form-item label="留言内容" prop="message">
                <el-input type="textarea" v-model="message.message"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center;margin-top: 60px;">
                <el-button type="primary" @click="submitForm">提交留言</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
  
<script>
export default {
    data() {
        return {
            message: {
                name: '',
                email: '',
                content: ''
            },
            messages: [],
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                   
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },

                ],
                phone: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' },

                ],
                message: [
                    { required: true, message: '请输入留言内容', trigger: 'blur' },

                ]
            }
        };
    },
    mounted() {

    },
    methods: {
        // 提交留言
        submitForm() {
            this.$refs.messageForm.validate(valid => {
                if (valid) {
                    this.request.post("/message", this.message).then(res => {
                        if (res.code == 200) {
                            this.$message.success("留言成功");
                            this.$refs.messageForm.resetFields();
                        }
                    })
                }
            });
        },

        // 格式化日期时间
        formatDate(dateTime) {
            const date = new Date(dateTime);
            return date.toLocaleString();
        }
    }
};
</script>
  
<style lang="less" scoped>
.message-container {
    background-color: white!important;;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    height: 600px;
}

h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.empty-message {
    text-align: center;
    color: #999;
    font-size: 18px;
    margin-top: 20px;
}
</style>
  